<template>
  <div class="slot">
    <header class="header">
      <!-- 具名插槽 -->
      <slot name="header"></slot>
    </header>

    <!--  匿名插槽 1 在组件中定义slot
      匿名插槽无法与匿名作用域共存
    -->
    <!-- <main class="main">
      <slot></slot>
    </main> -->

    <!-- 具名插槽 -->
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>

    <!-- 具名作用域插槽 -->
    <section class="section">
      <div v-for="(item, index) in list" :key="index">
        <slot name="section" :data="item" :index="index"></slot>
      </div>
    </section>

    <!-- 匿名作用域插槽 -->
    <section class="section1">
      <div v-for="(item, index) in list" :key="index">
        <slot :data="item" :index="index"></slot>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

type Slot = {
  name: string;
  age: number;
};
const list = reactive<Slot[]>([
  {
    name: "小陈",
    age: 18,
  },
  {
    name: "小陈1",
    age: 181,
  },
  {
    name: "小陈2",
    age: 182,
  },
  {
    name: "小陈3",
    age: 183,
  },
]);
</script>

<style lang="less" scoped>
.header {
  background: greenyellow;
  height: 100px;
}
.main {
  background: red;
  height: 100px;
}
.footer {
  background: skyblue;
  height: 100px;
}
.section {
  background: rgba(204, 218, 10, 0.911);
  height: 100px;
}
.section1 {
  background: rgba(10, 41, 218, 0.911);
  height: 100px;
}
</style>
